<!-- 公共集合 -->
<style lang="scss">
    .workflow-itemtree{
        width:140px;
        height:100%;
        position: absolute;
        top:0;
        left:0;
        background: #f4f7fd;
        border-right: 1px solid #e4e7ed;
        padding: 70px 0 10px 0;
        .header-box{
            position: absolute;
            height:70px;
            width:100%;
            left:0;
            top:0;
            .title{
                line-height: 30px;
                text-align: center;
                font-size: 14px;
                color: #797979;
                margin-top: 5px;
            }
            .itemview-search{
                padding: 4px !important;
                .el-input{
                    width:100% !important;
                }
            }
        }
        .el-tree{
            background: transparent;
            height:100%;
            overflow:auto;
            .el-tree-node.is-current{
                color:#2f6bcf;
            }
            .el-tree-node__expand-icon.is-leaf {
                padding: 6px 3px;
            }
        }

    }
</style>
<template>
  <div class="workflow-itemtree">
    <div class="header-box">
      <div class="title">
        {{ $t('_workflow.classification') }}
      </div>
      <!-- 查询 -->
      <div class="itemview-search">
        <el-input
          v-model="keyword"
          :placeholder="$t('_workflow.search')"
          @input="inputChange($event)"
          size="mini"
          suffix-icon="el-icon-search"
          clearable
        />
      </div>
    </div>
    <el-tree
      :data="data"
      ref="tree"
      :props="defaultProps"
      :expand-on-click-node="true"
      @node-click="handleNodeClick"
      :filter-node-method="filterNode"
      :default-expanded-keys="treeExpandData"
      node-key="id"
      highlight-current
    />
  </div>
</template>
<script>
export default {
  name: 'ItemTree',
  props: {
    data: Array,
    treeExpandData: Array,
  },
  data() {
    return {
      treeExpandData: this.treeExpandData,
      data: this.data,
      selectNode: '',
      keyword: '',
      defaultProps: {
        children: 'children',
        label: 'text',
      },
    };
  },
  watch: {
    keyword(nv) {
      this.$refs.tree.filter(nv);
    },
  },
  mounted() {},
  methods: {
    inputChange(e) {
      this.$forceUpdate();
    },
    // 模糊查询树节点
    filterNode(value, data) {
      if (!value) return true;
      return data.text.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      const { tree } = this.$refs;
      if (this.selectNode && data.id == this.selectNode.id) {
        this.selectNode = null;
        tree.setCurrentKey(null);
        data = null;
      } else {
        this.selectNode = data;
      }

      this.$emit('itemClick', data);
    },
  },
};
</script>
